/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  Text,
  useTheme,
  Container,
  Button,
  SuffixInput,
  IconArrowRight,
  Input,
  Select,
  InputDatalist, CheckSwitch,
  ComboBoxDatalist, InputLine, LineColumn,
  CommitInput
} from "customize-easy-ui-component";

import { DialogEnterReturn } from "../../context/DialogEnterReturn";
//import queryString from "querystring";
import {useCommnBaseParm, CommnBase} from "./CommnBase";
import {危险介质分类} from "./容器";
import {监检形式} from "./起重";

const queryString = require('query-string');
export const 车辆防爆等级=["EX s d ib ⅡBT4 Gb/DIP A21 TA，T4","ⅡBT4","Ex nA De ib ⅡC T4Gc","ExdeibmbⅡBT4Gc","Exde ib mbs II BT4 Gb/Ex tD ibD mbD A21 IP65 T130℃"];
export const 场所防爆等级=["ⅡBT4","2区","1区","21区ⅢBT4","2区ⅡBT4"," ⅡB T4","II BT4 ",'其他'];
export const 车辆类型=["内燃平衡重式叉车","叉车","蓄电池平衡重式叉车","装载机","自卸汽车","货车","牵引车","挖掘机","蓄电池观光车","内燃观光车","压路机","蓄电池前移式叉车",'其他'];
export const 车辆使用环境=['普通场所','易燃易爆场所'];    //?实应改成Boolean;
export const 传动方式=['机械传动','液力传动','静压传动','电传动'];
export const 动力方式=['内燃机','电动机',"发动机","内燃","内燃式","蓄电池",'其它'];
export const 轮胎类型=['充气轮胎','实心轮胎',"充气轮胎+实心轮胎","实心胎"];
export const 燃料种类=['汽油','柴油','蓄电池',"柴油机",'其它'];
export const 使用区域型=['厂内','场内'];
export const 车辆使用区域=["工厂厂区","旅游景区","游乐场所"];
export const 行走装置=['轮胎式','履带式','其它'];
export const 驱动形式=["前轮驱动","后轮驱动"];
export const 燃油类型s=["柴油","汽油","蓄电池","柴油机","其它"];
export const 车辆颜色=["黄色","红色","桔黄色","绿色","白色","橙色","桔红色","浅蓝色","蓝色","深蓝色","橘黄色","橙红色"];


interface 厂车props {
  id?: string;
  readOnly?: boolean;
  editable?: boolean;
  //当前设备数据(确认修改之后)
  eqp?:any;
  //去修改设备数据
  mutationFunc: (...args: any[]) => any;
}
/**空车重量：竟然两个字段 VEHWEI(数据太少，不用)  EMPTY_WEIGHT；
* */
export const 厂车: React.FunctionComponent<厂车props> = ({
       readOnly,
       id,
       editable,
       eqp=null,    //从好几代祖先前的DetailedGuide在graphQL获得后端服务器数据层层传递下来的。
                                                       mutationFunc,
     }) =>
{
  //const qs= queryString.parse(window.location.search);
  const theme = useTheme();
  const {save}= window.history.state?.state??{};      //通用伪对话框传递格式
  const edt = save?  save : eqp;

  const [pow, setPow] = React.useState(edt.pow);
  const [rtlf, setRtlf] = React.useState(edt.rtlf);
  const [mtm, setMtm] = React.useState(edt.mtm);

  const  svp = edt?.svp;
  const [牌型, set牌型] = React.useState(svp?.牌型);
  const [防爆级, set防爆级] = React.useState(svp?.防爆级);
  const [车类型, set车类型] = React.useState(svp?.车类型);
  const [厢数, set厢数] = React.useState(svp?.厢数);
  const [传动, set传动] = React.useState(svp?.传动);
  const [底盘号, set底盘号] = React.useState(svp?.底盘号);
  const [电机号, set电机号] = React.useState(svp?.电机号);
  const [机编号, set机编号] = React.useState(svp?.机编号);
  const [机功率, set机功率] = React.useState(svp?.机功率);
  const [机转速, set机转速] = React.useState(svp?.机转速);
  const [后轮距, set后轮距] = React.useState(svp?.后轮距);
  const [驾员, set驾员] = React.useState(svp?.驾员);
  const [升最高, set升最高] = React.useState(svp?.升最高);
  const [前轮距, set前轮距] = React.useState(svp?.前轮距);
  const [燃料, set燃料] = React.useState(svp?.燃料);
  const [设规范, set设规范] = React.useState(svp?.设规范);
  const [电压, set电压] = React.useState(svp?.电压);
  const [行装置, set行装置] = React.useState(svp?.行装置);
  const [制规范, set制规范] = React.useState(svp?.制规范);
  const [最坡度, set最坡度] = React.useState(svp?.最坡度);
  const [时速, set时速] = React.useState(svp?.时速);

  const  pa = edt?.pa;
  const [环境, set环境] = React.useState(pa?.环境);
  const [用区域, set用区域] = React.useState(pa?.用区域);
  const [车空重, set车空重] = React.useState(pa?.车空重);
  const [胎型, set胎型] = React.useState(pa?.胎型);
  const [头座位, set头座位] = React.useState(pa?.头座位);
  const [厢座位, set厢座位] = React.useState(pa?.厢座位);
  const [引力, set引力] = React.useState(pa?.引力);
  const [驱动, set驱动] = React.useState(pa?.驱动);
  const [油类, set油类] = React.useState(pa?.油类);
  const [场防爆级, set场防爆级] = React.useState(pa?.场防爆级);
  const [区域型, set区域型] = React.useState(pa?.区域型);
  const [颜色, set颜色] = React.useState(pa?.颜色);
  const [有拖, set有拖] = React.useState(pa?.有拖);
  const [速度, set速度] = React.useState(pa?.速度);
  const [载心距, set载心距] = React.useState(pa?.载心距);

  //肢解可复用的共同组件模式： Hook + 配套的组件。
  const cbp =useCommnBaseParm(eqp, svp, pa, save);

  async function confirmation() {
    const newdat={ ...eqp,  ...cbp.out,
      pow,rtlf,mtm,
      svp: { ...cbp.svpO,
        牌型,防爆级,车类型,厢数,传动,底盘号,电机号,机编号,机功率,机转速,后轮距,
        驾员,升最高,前轮距,燃料,设规范,电压,行装置,制规范,最坡度,时速,
        }
      ,
      pa: { ...cbp.paO,
        环境,用区域,车空重,胎型,头座位,厢座位,引力,驱动,油类,场防爆级,区域型,
        颜色,有拖,速度,载心距,
        }

    };

    return newdat;
  }


  return (
    <div
      css={{
        [theme.mediaQueries.md]: {
          height: "auto",
          display: "block"
        }
      }}
    >
      <hr/>
      <Text
        css={{
          flex: 1,
          textAlign: "center",
          [theme.mediaQueries.md]: {
            textAlign: "left"
          }
        }}
        wrap={false}
        variant="h5"
        gutter={false}
      >
        {eqp.cod} 厂车技术参数
      </Text>

      <div
        css={{
          flex: 1,
          [theme.mediaQueries.md]: {
            flex: "none"
          }
        }}
      >
        <div>
          <Container>
            <div
              css={{
                paddingTop: theme.spaces.lg,
                paddingBottom: theme.spaces.lg
              }}
            >

            <CommnBase cbp={cbp} id={id!}  confirmation={confirmation}/>
            <Text variant="h5">厂车参数</Text>
            <LineColumn >
              <InputLine label={`厂牌型号:`}>
                <CommitInput  value={ 牌型 || ''}  onSave={txt => set牌型(txt||undefined) } />
              </InputLine>
              <InputLine label={`车辆防爆等级:`}>
                <InputDatalist value={ 防爆级 || ''} datalist={车辆防爆等级}
                               onListChange={v => set防爆级(v ||undefined)} />
                {/*<Select inputSize="md"  value={ 防爆级 || ''}
                        onChange={e => set防爆级( e.currentTarget.value||undefined ) } >
                  <option></option>
                  { 车辆防爆等级.map((one,i) => (<option key={i}>{one}</option> )) } </Select>*/}
              </InputLine>
              <InputLine label={`车辆类型:`}>
                <InputDatalist value={ 车类型 || ''} datalist={车辆类型}
                               onListChange={v => set车类型(v ||undefined)} />
              </InputLine>
              <InputLine label={`车辆使用环境:`}>
                <Select inputSize="md"  value={ 环境 || ''}
                        onChange={e => set环境( e.currentTarget.value||undefined ) } >
                  <option></option>
                  { 车辆使用环境.map((one,i) => (<option key={i}>{one}</option> )) } </Select>
              </InputLine>
              <InputLine label={`车辆使用区域:`}>
                <InputDatalist value={ 用区域 || ''} datalist={车辆使用区域}
                               onListChange={v => set用区域(v ||undefined)} />
              </InputLine>
              <InputLine label={`车厢数:`}>
                <SuffixInput  onSave={txt=> set厢数(txt||undefined)}
                              type="number"  value={ 厢数 || ''}>个</SuffixInput>
              </InputLine>
              <InputLine label={`传动方式:`}>
                <Select inputSize="md"  value={ 传动 || ''}
                        onChange={e => set传动( e.currentTarget.value||undefined ) } >
                  <option></option>
                  { 传动方式.map((one,i) => (<option key={i}>{one}</option> )) } </Select>
              </InputLine>
              <InputLine label={`底盘编号:`}>
                <CommitInput  value={ 底盘号 || ''}  onSave={txt => set底盘号(txt||undefined) } />
              </InputLine>
              <InputLine label={`电机出厂编号:`}>
                <CommitInput  value={ 电机号 || ''}  onSave={txt => set电机号(txt||undefined) } />
              </InputLine>
              <InputLine label={`动力方式:`}>
                <Select inputSize="md"  value={ pow || ''}
                        onChange={e => setPow( e.currentTarget.value||undefined ) } >
                  <option></option>
                  { 动力方式.map((one,i) => (<option key={i}>{one}</option> )) } </Select>
              </InputLine>
              <InputLine label={`额定载荷:`}>
                <SuffixInput  onSave={txt=> setRtlf(txt||undefined)}
                              type="number"  value={ rtlf || ''}>kg</SuffixInput>
              </InputLine>
              <InputLine label={`发动机编号:`}>
                <CommitInput  value={ 机编号 || ''}  onSave={txt => set机编号(txt||undefined) } />
              </InputLine>
              <InputLine label={`发动机功率:`}>
                <CommitInput  value={ 机功率 || ''}  onSave={txt => set机功率(txt||undefined) } />
              </InputLine>
              <InputLine label={`发动机型号:`}>
                <CommitInput  value={ mtm || ''}  onSave={txt => setMtm(txt||undefined) } />
              </InputLine>
              <InputLine label={`发动机转数:`}>
                <SuffixInput  onSave={txt=> set机转速(txt||undefined)}
                               value={ 机转速 || ''}>转/分</SuffixInput>
              </InputLine>
              <InputLine label={`后轮距:`}>
                <SuffixInput  onSave={txt=> set后轮距(txt||undefined)}
                              type="number"  value={ 后轮距 || ''}>mm</SuffixInput>
              </InputLine>
              <InputLine label={`驾驶室定员:`}>
                <SuffixInput  onSave={txt=> set驾员(txt||undefined)}
                              type="number"  value={ 驾员 || ''}>人</SuffixInput>
              </InputLine>
              <InputLine label={`空车重量:`}>
                <SuffixInput  onSave={txt=> set车空重(txt||undefined)}
                              value={ 车空重 || ''}>kg</SuffixInput>
              </InputLine>
              <InputLine label={`空载最大起升高度:`}>
                <SuffixInput  onSave={txt=> set升最高(txt||undefined)}
                              type="number"  value={ 升最高 || ''}>mm</SuffixInput>
              </InputLine>
              <InputLine label={`轮胎类型:`}>
                <Select inputSize="md"  value={ 胎型 || ''}
                        onChange={e => set胎型( e.currentTarget.value||undefined ) } >
                  <option></option>
                  { 轮胎类型.map((one,i) => (<option key={i}>{one}</option> )) } </Select>
              </InputLine>
              <InputLine label={`每节车厢座位数:`}>
                <SuffixInput  onSave={txt=> set厢座位(txt||undefined)}
                              type="number"  value={ 厢座位 || ''}>人</SuffixInput>
              </InputLine>
              <InputLine label={`牵引车头座位数:`}>
                <SuffixInput  onSave={txt=> set头座位(txt||undefined)}
                              type="number"  value={ 头座位 || ''}>人</SuffixInput>
              </InputLine>
              <InputLine label={`牵引力:`}>
                <SuffixInput  onSave={txt=> set引力(txt||undefined)}
                             value={ 引力 || ''}>KN</SuffixInput>
              </InputLine>
              <InputLine label={`前轮距:`}>
                <SuffixInput  onSave={txt=> set前轮距(txt||undefined)}
                              type="number"  value={ 前轮距 || ''}>mm</SuffixInput>
              </InputLine>
              <InputLine label={`驱动:`}>
                <InputDatalist value={ 驱动 || ''} datalist={驱动形式}
                               onListChange={v => set驱动(v ||undefined)} />
              </InputLine>
              <InputLine label={`燃料种类:`}>
                <Select inputSize="md"  value={ 燃料 || ''}
                        onChange={e => set燃料( e.currentTarget.value||undefined ) } >
                  <option></option>
                  { 燃料种类.map((one,i) => (<option key={i}>{one}</option> )) } </Select>
              </InputLine>
              <InputLine label={`燃油类型:`}>
                <InputDatalist value={ 油类 || ''} datalist={燃油类型s}
                               onListChange={v => set油类(v ||undefined)} />
              </InputLine>
              <InputLine label={`设计规范:`}>
                <CommitInput  value={ 设规范 || ''}  onSave={txt => set设规范(txt||undefined) } />
              </InputLine>
              <InputLine label={`使用场所防爆等级:`}>
                <InputDatalist value={ 场防爆级 || ''} datalist={场所防爆等级}
                               onListChange={v => set场防爆级(v ||undefined)} />
              </InputLine>
              <InputLine label={`使用区域:`}>
                <Select inputSize="md"  value={ 区域型 || ''}
                        onChange={e => set区域型( e.currentTarget.value||undefined ) } >
                  <option></option>
                  { 使用区域型.map((one,i) => (<option key={i}>{one}</option> )) } </Select>
              </InputLine>
              <InputLine label={`系统电压:`}>
                <SuffixInput  onSave={txt=> set电压(txt||undefined)}
                              type="number"  value={ 电压 || ''}>伏特</SuffixInput>
              </InputLine>
              <InputLine label={`行走装置:`}>
                <Select inputSize="md"  value={ 行装置 || ''}
                        onChange={e => set行装置( e.currentTarget.value||undefined ) } >
                  <option></option>
                  { 行走装置.map((one,i) => (<option key={i}>{one}</option> )) } </Select>
              </InputLine>
              <InputLine label={`颜色:`}>
                <InputDatalist value={ 颜色 || ''} datalist={车辆颜色}
                               onListChange={v => set颜色(v ||undefined)} />
              </InputLine>
              <InputLine label={`有否拖挂车:`}>
                <CheckSwitch checked={有拖 || false} onChange={e => set有拖(有拖? undefined:true)} />
              </InputLine>
              <InputLine label={`运行速度:`}>
                <SuffixInput  onSave={txt=> set速度(txt||undefined)}
                              type="number"  value={ 速度 || ''}>m/s</SuffixInput>
              </InputLine>
              <InputLine label={`载荷中心距:`}>
                <SuffixInput  onSave={txt=> set载心距(txt||undefined)}
                              type="number"  value={ 载心距 || ''}>mm</SuffixInput>
              </InputLine>
              <InputLine label={`制造规范:`}>
                <CommitInput  value={ 制规范 || ''}  onSave={txt => set制规范(txt||undefined) } />
              </InputLine>
              <InputLine label={`最大行驶坡度:`}>
                <SuffixInput onSave={txt=> set最坡度(txt||undefined)}
                              type="number"  value={ 最坡度 || ''}>%</SuffixInput>
              </InputLine>
              <InputLine label={`最高时速:`}>
                <SuffixInput  onSave={txt=> set时速(txt||undefined)}
                              type="number"  value={ 时速 || ''}>km/h</SuffixInput>
              </InputLine>

            </LineColumn>
              <Text variant="h5">其它参数</Text>
              <LineColumn >
              </LineColumn>

              <Button size="lg" intent="primary"  iconAfter={<IconArrowRight />}
                      css={{ marginTop: theme.spaces.sm, whiteSpace:'unset' }}
                onPress={ async () => {
                  const eqpNew=await confirmation();
                  await mutationFunc(eqpNew);
                } }
              > 确认修改检查并保存到后端
              </Button>
            </div>
          </Container>
        </div>
      </div>

    </div>
  );
};

